/**
 *入职指引 第二步
 */
import React, { useEffect, useImperativeHandle, useState } from 'react';

import { Accordion } from 'antd-mobile';
import { size } from 'lodash';
import { createForm } from 'rc-form';

import { defaultFormatResult, useRequest } from '@/hooks';
import { getEntryMaterials } from '@/pages/EntryManage/services';
import { EditListItem } from '@/pages/Recruitment/External/components';
import { transformFileList } from '@/pages/Recruitment/utils';
import { hasUploading } from '@/utils/utils';

import styles from '../../index.less';
import MaterialItem from '../MaterialItem';

// 信息确认
const StepMaterials = React.forwardRef(({ form, entryPersonnelData, setUploadIng }, ref) => {
    const { getFieldProps } = form;

    const { entryPersonnelCode } = entryPersonnelData;

    // 获取入职材料配置
    const { data: materialsConfigData = {} } = useRequest(() => getEntryMaterials({ entryPersonnelCode }), {
        ready: !!entryPersonnelCode,
        ...defaultFormatResult
    });

    const { electronMaterials = [], entityMaterials = [], tipInfo } = materialsConfigData;
    const allMaterials = [...electronMaterials, ...entityMaterials];

    // 是否上传完成
    useEffect(() => {
        const values = form.getFieldsValue();
        if (size(values) > 0) {
            setUploadIng(hasUploading(values));
        }
    }, [form, setUploadIng]);

    useImperativeHandle(ref, () => ({
        form,
        materialsConfigData
    }));
    const [accordionActiveKey, setAccordionActiveKey] = useState(['0', '1']);
    return (
        <Accordion
            activeKey={accordionActiveKey}
            accordion={false}
            className={styles.accordionList}
            onChange={setAccordionActiveKey}
        >
            {allMaterials.length && (
                <Accordion.Panel
                    header={
                        <div>
                            电子材料 <span style={{ color: '#ddd', fontWeight: 'normal' }}>(选填)</span>
                        </div>
                    }
                >
                    {allMaterials.map((item, idx) => {
                        const key = `${item?.materialCode}${idx}`;
                        const { materialName, materialCode, urlList, inputType } = item;
                        return (
                            <EditListItem title={materialName} showArrow={false} key={key}>
                                <MaterialItem
                                    {...getFieldProps(materialCode, {
                                        initialValue: inputType === 1 ? transformFileList(urlList) || [] : undefined
                                    })}
                                    {...item}
                                />
                            </EditListItem>
                        );
                    })}
                </Accordion.Panel>
            )}
            {tipInfo && (
                <Accordion.Panel header="实体材料">
                    <div style={{ padding: '12px 15px' }}>
                        <div
                            className={styles.textContent}
                            // eslint-disable-next-line react/no-danger
                            dangerouslySetInnerHTML={{
                                __html: tipInfo?.replace(/[\r\n]+/g, '<br />')
                            }}
                        />
                    </div>
                </Accordion.Panel>
            )}
        </Accordion>
    );
});

export default createForm()(StepMaterials);
